<template>
	<!-- 头像裁剪器整体容器 -->
	<view class="cropper-wrapper">

		<!-- 这是可拖动的边界，我们给它一个灰色背景以便观察 -->
		<!-- 注意：必须设置 width 和 height -->
		<movable-area class="movable-area" scale-area="true">
			<!-- 这是真正可移动和缩放的视图，里面放着用户的图片 -->
			<!-- 我们让它初始比movable-area大，方便移动 -->
			<movable-view class="movable-view" direction="all" scale="true" scale-min="0.5" scale-max="4" :x="x" :y="y">
				<image class="avatar-image" src="/static/logo.png" mode="aspectFill"></image>
			</movable-view>
		</movable-area>

		<!-- 叠加一个“取景框”遮罩层，给用户明确的裁剪范围指示 -->
		<view class="crop-mask"></view>

	</view>
</template>

<style scoped>
	.cropper-wrapper {
		position: relative;
		width: 300px;
		height: 300px;
		margin: 50px auto;
		overflow: hidden;
		/* 隐藏超出容器的部分 */
	}

	.movable-area {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
	}

	.movable-view {
		/* 初始尺寸可以大于或等于 movable-area */
		width: 120%;
		height: 120%;
		/* 让图片在视图中居中 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	/* 关键：遮罩层的实现 */
	.crop-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* 使用 box-shadow 制作一个中间透明的遮罩 */
		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
		/* 如果想要圆形取景框，加上这个 */
		border-radius: 50%;
		pointer-events: none;
		/* 让鼠标/触摸事件穿透遮罩层，作用到下方的movable-area */
	}
</style>